import E from 'wangeditor'

import { reactive } from 'vue'

const state = reactive({
  editor: null
})

// 初始化富文本编辑器
function initEditor () {
  state.editor = new E('#editor-main')
  // 取消自动 focus
  state.editor.config.focus = false

  // 配置菜单
  configNav()

  // 自定义上传
  customFileImage()
  // 插件上传
  // handleImage()

  // 自定义上传
  customFileVideo()
  // 插件上传
  // handleVideo()

  state.editor.create()
}

// 配置菜单 config.menus: 显示的是那些菜单和顺序。config.excludeMenus：剔除某些不需要的菜单。（这两者不能同时使用以免冲突和混乱）
function configNav () {
  // 默认所有
  state.editor.config.menus = ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'todo', 'justify', 'quote', 'emoticon', 'image', 'video', 'table', 'code', 'splitLine', 'undo', 'redo']
}

// 自定义上传图片
function customFileImage () {
  state.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    console.log(resultFiles)
    console.log(666)

    /**
     * 自定义上传 可以通过 请求后台接口上传获取图片地址；或者通过 oss 获取到图片地址
     *
     * 通过 axios 请求服务器，上传图片。获取到图片，再插入到编辑器中
     * 例如：
     * axios.post({}, (res) => {
     * console.log(res) // 图片链接
     * })
     */

    // 上传图片，返回结果，将图片插入到编辑器中
    // insertImgFn(imgUrl)
  }
}

// 自定义上传视频
function customFileVideo () {
  state.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
    console.log(resultFiles)
    console.log(666)

    /**
     * 自定义上传 可以通过 请求后台接口上传获取视频地址；或者通过 oss 获取到视频地址
     *
     * 通过 axios 请求服务器，上传视频。获取到视频，再插入到编辑器中
     * 例如：
     * axios.post({}, (res) => {
     * console.log(res) // 视频链接
     * })
     */

    // 上传视频，返回结果，将视频地址插入到编辑器中
    // insertVideoFn(videoUrl)
  }
}

// 插件自带上传视频
function handleVideo () {
  state.editor.config.uploadVideoServer = '/upload-img' // 配置 server 接口地址
  state.editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m
  state.editor.config.uploadVideoAccept = ['mp4']
  state.editor.config.uploadVideoName = 'fileVideo' // 自定义 fileName 自定义上传名称

  // state.editor.config.uploadVideoParams = { // 自定义上传参数
  //   token: 'xxxxx',
  //   x: 100
  // }
  // 自定义 header
  state.editor.config.uploadVideoHeaders = {
    Accept: 'application/json'
  }

  fileVideoCallback()
}

// 插件自带上传视频回调
function fileVideoCallback () {
  state.editor.config.uploadVideoHooks = {
    // 上传视频之前
    before: function (xhr) {
      console.log(xhr)
      // 可阻止视频上传
      return {
        prevent: true,
        msg: '需要提示给用户的错误信息'
      }
    },
    // 视频上传并返回了结果，视频插入已成功
    success: function (xhr) {
      console.log('success', xhr)
    },
    // 视频上传并返回了结果，但视频插入时出错了
    fail: function (xhr, editor, resData) {
      console.log('fail', resData)
    },
    // 上传视频出错，一般为 http 请求的错误
    error: function (xhr, editor, resData) {
      console.log('error', xhr, resData)
    },
    // 上传视频超时
    timeout: function (xhr) {
      console.log('timeout')
    },
    // 视频上传并返回了结果，想要自己把视频插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
    customInsert: function (insertVideoFn, result) {
      // result 即服务端返回的接口
      console.log('customInsert', result)

      // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
      insertVideoFn(result.data.url)
    }
  }
}

// 插件自带上传图片
function handleImage () {
  state.editor.config.uploadImgServer = '/upload-img' // 配置 server 接口地址
  state.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
  state.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif'] // 限制类型
  state.editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
  state.editor.config.uploadFileName = 'fileImage' // 自定义 fileName 自定义上传名称

  // state.editor.config.uploadImgParams = { // 自定义上传参数
  //   token: 'xxxxx',
  //   x: 100
  // }
  // 自定义 header
  state.editor.config.uploadImgHeaders = {
    Accept: 'application/json'
  }

  fileImageCallback()
}

// 插件自带上传图片回调
function fileImageCallback () {
  state.editor.config.uploadImgHooks = {
    // 上传图片之前
    before: function (xhr) {
      console.log(xhr)
      // 可阻止图片上传
      return {
        prevent: true,
        msg: '需要提示给用户的错误信息'
      }
    },
    // 图片上传并返回了结果，图片插入已成功
    success: function (xhr) {
      console.log('success', xhr)
    },
    // 图片上传并返回了结果，但图片插入时出错了
    fail: function (xhr, editor, resData) {
      console.log('fail', resData)
    },
    // 上传图片出错，一般为 http 请求的错误
    error: function (xhr, editor, resData) {
      console.log('error', xhr, resData)
    },
    // 上传图片超时
    timeout: function (xhr) {
      console.log('timeout')
    },
    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
    customInsert: function (insertImgFn, result) {
      // result 即服务端返回的接口
      console.log('customInsert', result)

      // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      insertImgFn(result.data[0])
    }
  }
}

// 设置内容
function setContent (html) {
  state.editor.txt.html(html)
}

// 清除内容
function clearContent () {
  state.editor.txt.clear()
}

// 获取 html 内容
function getContent () {
  return state.editor.txt.html()
}

// 销毁编辑起
function destroyEditor () {
  state.editor.destroy()
  state.editor = null
}

export { initEditor, setContent, clearContent, getContent, destroyEditor }
